<template>
	<view>
		<view class="u-demo-block__content">
			<u-row customStyle="margin-bottom: 10px">
			    <u-col span="8">
			        <view class="div1">
						<view class="div2">
							{{patient.name}}
							<u-tag v-bind:text="patient.relation"  shape="circle" class="tag1"></u-tag><br>
							{{patient.number}}
						</view>
						<view style="width: 130rpx;height: 50rpx;float: right;font-size: 4rpx;" @click="cutShow()">
							<view style="width: 50rpx;height: 50rpx;background-color: #000000;margin: 0 auto;"></view>
							切换就诊人
						</view>
					</view>
			    </u-col>
			
			</u-row>
		</view>
		<view style="padding: 25rpx 30rpx; color: #909193;font-size: 20rpx;">
			科室-{{division.divisionName}}
		</view>
		<view style="padding-left: 30rpx;padding-bottom: 20rpx;">
			选择预约时间
		</view>
		<view>
			<view class="div9" style="background-color: white;">
				<view class="div3" v-for="time,index in times" >
					<view class="div4" >
						{{time.week}}
					</view>
					<view class="div5" :class="{toBlue:currentIndex==index}" @click="changeDay(index,time)">{{time.day}}</view>
				</view>
			</view>
		</view>
		<view style="display: block;">
			<view style="margin: 20rpx;font-size: 25rpx;color: #999999;">上午号源</view>
			<view class="div7">
				<view class="div8" v-for="am in amSource" :class="{toGray:am.numberSource<=0}" @click="nucleicAcidAppoientment(am)">
					<view style="margin-right: 10rpx;display: inline-block;">{{am.startTime}}</view>剩余{{am.numberSource}}
				</view>
			</view>
		</view>
		<view style="display: block;">
			<view style="margin: 20rpx;font-size: 25rpx;color: #999999;display: block;">下午号源</view>
			<view class="div7">
				<view class="div8" v-for="pm in pmSource" :class="{toGray:pm.numberSource<=0}" @click="nucleicAcidAppoientment(pm)">
					<view style="margin-right: 10rpx;display: inline-block;">{{pm.startTime}}</view>剩余{{pm.numberSource}}
				</view>
			</view>
		</view>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate" class="homepage">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient)" class="flex-row wrapper" v-for="patient in patients" style="margin: 20rpx 5rpx;
	padding: 10rpx;background-color: #E5E5E5;">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view style="float: left;margin-right: 10rpx;">{{patient.name}}</view>
							<view style="padding: 5rpx 15rpx;background-color: #3289FF;display: inline-block;border-radius: 10rpx;">
								<view style="">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {msg} from '@/utils/utils.js'
	import request from '@/utils/requestConfig.js'
	export default{
		data(){
			return{
				userId:uni.getStorageSync('user').id,
				isCut:false,
				patient:{
					id:1,
					name:'小明',
					relation:'本人',
					number:'123456789'
				},
				patients:[],
				division:{
					id:24,
					divisionName:'保健室'
				},
				campus:{
					id:1,
					campusName:'北京市第一人民医院-东院'
				},
				timeNeed:{
					
				},
				times:[
					{
						time:'2022-06-12',
						week:'周一',
						day:'12'
					}
				],
				clocks:[
					{
						startTime:'9:00',
						numberSource:10,
						apm:'am'
					}
				],
				currentIndex:0,
				amSource:[],
				pmSource:[],
				appotientmentTime:'',
			}
		},
		created() {
			this.loadData();
			this.nucleicAcidAppoientmentEcho()
		
		},
		methods:{
			cutShow(){
				this.isCut=!this.isCut
			},
			cutDate(){
				this.isCut=!this.isCut
			},
			cutPatient(patient){
				this.patient=patient
				this.isCut=!this.isCut
			},
			loadData(){
				/* 处理患者 */
				let data;
				uni.getStorage({
					key:'patient',
					success(res) {
						//alert(JSON.stringify(res))
						data=res.data
					}
				})
				
				this.patient.id=data.id
				this.patient.number=data.number
				this.patient.name=data.name
				this.patient.hospitalNumber=data.hospitalNumber
				
				request.post('/user/user/the-patient/findPatientByUserId',{userId:this.userId},false).then((res)=>{
					
					let tagList=res.data.thePatientList
					this.patients=tagList
					// for(let i=0;i<tagList.length;i++){
					// 	let tag=tagList[i]
					// 	if(tag.defaultPerson=="是"){
					// 		this.patient=tag
					// 		//alert(this.patient.hospitalNumber)
					// 		this.checkBalance()
					// 		// console.error(this.patient)
					// 	}
					// }
					
					uni.hideLoading();
				}).catch((error)=>{
					
					console.log(error)
				})
				//alert(JSON.stringify(this.patient))
			},
			
			
			formatRole(row){
				console.log(row)
			    return "66";
			},
			changeDay(index,time){
				this.clocks=time.timesList
				this.handleClock()
				
				this.currentIndex=index;
				this.appotientmentTime=time.time;
			},
			handleClock(){
				this.amSource=[]
				this.pmSource=[]
				let tagList=this.clocks;
				for(let i=0;i<tagList.length;i++){
					let tag=tagList[i];
					if(tag.apm=="am"){
						this.amSource.push(tag)
					}else if(tag.apm=="pm"){
						this.pmSource.push(tag)
					}
				}
			},
			/* 点击号源 预约 */
			nucleicAcidAppoientment(m){
				let appotientmentTime=this.appotientmentTime+" "+m.startTime
				console.log(appotientmentTime);
				request.post('/appointment/appointment/nucleic-acid/nucleicAcidAppointment',
				{"patientId":this.patient.id,"time":m.startTime,"date":this.appotientmentTime,"campusId":uni.getStorageSync('HospitalId')}
				,true).then(res=>{
					console.log("===============+==============="+JSON.stringify(res))
					
					// this.times=res.data.data
					// this.clocks=res.data.data[0].timesList
					// this.appotientmentTime=this.times[0].time
					uni.setStorageSync('patient',this.patient)
					uni.navigateTo({
						url:'/pages/appointment/nucleicAcidConfirmAppointment'
					})
					this.handleClock()
					uni.hideLoading();
				}).catch(error=>{
					console.log(error)
				})
			},
			/* 预约数据回显 */
			nucleicAcidAppoientmentEcho(){
				request.post('/appointment/appointment/nucleic-acid-appointment/nucleicAcidEcho',null,false).then(res=>{
					console.log("===============+==============="+JSON.stringify(res))
					
					this.times=res.data.data
					this.clocks=res.data.data[0].timesList
					this.appotientmentTime=this.times[0].time
					this.handleClock()
					uni.hideLoading();
				}).catch(error=>{
					console.log(error)
				})
			}
		},
	}
</script>

<style scoped>
.div1{
	width:600rpx;
	background-color: #f3f8ff;
	border:f4f4f5 solid 1rpx;
	border-radius: 15px;
	margin-left:10px;
	margin-top:10px;
	padding: 50rpx;
}
.div9{
	
	width:660rpx;
	height:130rpx;
	border:f4f4f5 solid 1rpx;
	border-radius: 15px;
	margin-left:10px;
	margin-top:10px;
	padding: 20rpx;
	text-align: center;
}
.div2{
	color: #b1b2b4;
	float: left;
}
.div3{

	margin: 8.2rpx;
	float: left;
}
.div4{
	font-size: 20rpx;
}
.div5{
	font-size: 23rpx;
	padding: 4rpx 18rpx;
	background-color: #9ACAFC;
	margin: 10rpx;
	
	border-radius: 20rpx;
}


.div7{
	display: block;
}
.div8{
	background-color: #9ACAFC;
	color: #007AFF;
	width: 100px;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 20rpx;
	text-align: center;
	display: inline-block;
	margin: 20rpx;
}


.toBlue{
	background-color: #007AFF;
}
.toGray{
	background-color: #C8C9CC;
}
.tag1{
	display: inline-block;
	color: #3289ff;
	margin-left: 10px;
	
	/* background-color: #3289ff; */
}


</style>
